<template>
  <el-card shadow="hover" class="order-remind">
    <template #header>
      <el-tabs v-model="activeTab" type="card">
        <el-tab-pane label="订单交付提醒" name="order"></el-tab-pane>
        <el-tab-pane label="工单提醒" name="work"></el-tab-pane>
        <el-tab-pane label="工序提醒" name="process"></el-tab-pane>
        <el-tab-pane label="即将到期物品" name="expire-soon"></el-tab-pane>
        <el-tab-pane label="已到期物品" name="expired"></el-tab-pane>
      </el-tabs>
    </template>
    <el-table :data="orders" border style="width: 100%">
      <el-table-column prop="orderNo" label="单据单号" />
      <el-table-column prop="subject" label="单据主题" />
      <el-table-column prop="type" label="单据类型" />
      <el-table-column prop="deliverDate" label="交付日期" />
      <el-table-column label="操作">
        <template #default>
          <el-button type="text" size="small">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script setup>
import { ref } from 'vue'

const activeTab = ref('order')
defineProps({
  orders: {
    type: Array,
    required: true
  }
})
</script>

<style scoped>
.order-remind {
  width: 100%;
}
</style>